<template>
	<view class="friendslist" :style="{marginTop:systemBarHeight+'px'}">
		<mheader :userinfo = "userinfo" @touserdetail = "touserdetail"></mheader>
		<scroll-view scroll-y="true"  class="list" :style="{top:(systemBarHeight+60)+'px'}">
			<view class="container" >
				<view class="item request"  @tap="request" v-show="requestflag">
					<view class="left">					
						<image src="../../static/images/commom/request.png" class="userimg"></image>
						<view class="tips" v-show="requestlist.tip != 0">
							{{requestlist.tip}}
						</view>
					</view>
					<view class="right">
						<view class="top">
							<view class="username">好友请求</view>
							<view class="time">{{requestlist.lasttime}}</view>
						</view>
						<view class="bottom">
							<view class="msg">
								{{requestlist.message}}
							</view>
						</view>
					</view>
				</view>
				<view class="item" v-for="(item,index) in indexlist" @tap.stop="tochartroom(item)">
					<view class="left" @tap.stop="touserinfo(item)">				
						<image :src="item.imgurl" class="userimg"></image>
						<view class="tips" v-show="item.tip != 0">
							{{item.tip}}
						</view>
						<image src="../../static/images/commom/group.png" class="groupicon" v-if="item.tap == 1"></image>
					</view>
					<view class="right">
						<view class="top">
							<view class="username">{{item.name}}</view>
							<view class="time">{{item.lasttime}}</view>
						</view>
						<view class="bottom">
							<view class="msg">
								{{item.message}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="nonoe" v-if="aloneflag && !netflag">
			<image class="imgalone" src="../../static/images/commom/alone.png"></image>
			<view class="tip">一个好友都没有</view>
			<view class="searchfriend" @tap = "tosearch">
				搜索好友
			</view>
		</view>
		<view class="nonet" v-if="netflag">
			<image class="netimage" src="../../static/images/commom/loading.png"></image>
			<view class="tip">下拉刷新</view>
		</view>
	</view>
</template>

<script>
	// import {mapMutations} from 'vuex'
	import mheader from "../../components/mheader/mheader.vue"
	import myfunc from "../../commoms/js/myfunction.js"
	export default {
		data() {
			return {
				userinfo:{},
				indexlist:[],
				requestlist:{},
				requestflag:false,
				aloneflag:true,
				netflag:true,
				systemBarHeight:''
			};
		},
		onLoad(e){
			if(e.del == 1){
				uni.showToast({
				    title:'已删除',
				    duration: 2000,
				    icon:'none',
				    position:'top'
				});
			}
			this.getSysteminfo();
			this._getuserinfo();
			this.showindex(0);
			this.showindex(1);
			this.join(this.userinfo.id);
			this._getsocketmeg('msg');
			this._getsocketmeg('groupmsg');
		},
		onPullDownRefresh() {
			this.showindex(0)
			this.showindex(1)
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods:{
			getSysteminfo() {//获取系统栏高度
				uni.getSystemInfo({
					success: (res) => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			_getsocketmeg(msg){//用户首页同时也要接收消息,对主页的好友进行头位排序
				this.socket.on(msg,(data,tip)=>{
					for(var i = 0;i<this.indexlist.length;i++){
						let obj = this.indexlist[i];
						let flag;
						if(msg == 'msg'){
							flag = (data.uid == obj.id || data.tid == obj.id)
						}else if(msg == 'groupmsg'){
							flag = (data.tid == obj.id);
							this._updatauserinfo(data.tid,'lasttime',new Date());
						}
						if(flag){
							obj.lasttime = myfunc.gettime(new Date());//最后的更新时间
							obj.tip++;//未读消息数
							if(data.type == 0){
								obj.message = data.data;
							}else if(data.type == 1){
								obj.message = '[图片]'
							}else if(data.type == 2){
								obj.message = '[语音]'
							}else if(data.type == 3){
								obj.message = '[位置]'
							}
							this.indexlist.splice(i,1);
							this.indexlist.unshift(obj);
						}
					}
				})
			},
			_updatauserinfo(gid,type,mydata){//提交修改群个人信息
				uni.request({
					url:this.serverurl+'group/groupuserupdate',
					data:{
						gid:gid,
						uid:this.userinfo.id,
						type,
						data:mydata,
						token:this.userinfo.token
					},
					method:'POST',
					success: (result) => {
						let info = result.data;
						if(info.status == 200){
							
						}else if(info.status == 500){
							uni.showToast({
							    title: '修改失败',
							    duration: 2000,
								icon:'none',
								position:'top'
							});
						}
						else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}
					}
				})
			},
			join(uid){
				this.socket.emit('login',uid)
			},
			tosearch(){
				uni.navigateTo({
					url:"../../pages/search/search"
				})
			},
			_getuserinfo(){//获取传递过来的用户数据
				try
				{
					const value = uni.getStorageSync('wikiuser');
					if (value) {
						this.userinfo = JSON.parse(value);
					}
				} 
				catch (err) {
					console.log(err)
				}
				this.userinfo.imgurl = this.serverurl+`userimage/${this.userinfo.imgurl}`;
			},
			touserdetail(info){//跳转到用户详情，后根据用户之间的关系来判断显示，0本人1好友2非好友
				uni.navigateTo({
					url:`../friendinfo/friendinfo?id=${info.id}`
				})
			},
			tochartroom(item){
				// this.setfriend(item);
				// console.log(item)
				uni.navigateTo({//跳转到聊天页面
					url:`../chartroom/chartroom?id=${item.id}&imgurl=${item.imgurl}&name=${item.name}&tap=${item.tap}`
				})
			},
			request(){//跳转到请求详情页
				uni.navigateTo({//用户好友列表的跳转
					url:`../request/request?id=${this.userinfo.id}`
				})
			},
			async showindex(state){//显示首页好友和群列表
				let userlist = await this.showuserlist(state).then(data => data);			
				if(state == 0){
					let grouplist = await this.showgrouplist().then(data => data);	
					//socket加入群房间
					for(var i = 0;i<grouplist.length;i++){
						let gid = grouplist[i].id;
						grouplist[i].message = grouplist[i].msgname+':'+grouplist[i].msg;
						this.socket.emit('group',gid);//发送群号当房间名
					}
					//socket加入群房间
					this.indexlist = grouplist.concat(userlist)
					this.indexlist.sort(function(a,b){//主页获取好友和群之后根据最新的消息进行时间的排序
						let q = (new Date(a.lasttime)).getTime()
						let y = (new Date(b.lasttime)).getTime()
						return y-q
					})
					
					for(var i = 0;i<this.indexlist.length;i++){
						let obj = this.indexlist[i];
						if(obj.tap == 0){
							obj.imgurl = this.serverurl+`userimage/${obj.imgurl}`;							
						}else if(obj.tap == 1){
							obj.imgurl = this.serverurl+`group/${obj.imgurl}`;	
						}
						obj.lasttime = myfunc.gettime(obj.lasttime)
					}
					if(this.indexlist.length > 0){
						this.aloneflag = false
					}else{
						this.aloneflag = true
					}
				}else if(state == 1){
					if(userlist.length > 0){
						userlist.sort(function(a,b){
							let a_time = (new Date(a.lasttime)).getDate()
							let b_time = (new Date(b.lasttime)).getDate()
							return a_time-b_time
						})
						this.requestlist = {
							tip:userlist.length,
							lasttime:myfunc.gettime(userlist[0].lasttime),
							message:userlist[0].message
						}
					}else{
						this.requestlist = {}
					}	
				}
				if(this.indexlist.length > 0 || JSON.stringify(this.requestlist) != "{}"){
					this.aloneflag = false;
				}else{
					this.aloneflag = true;
				}
				if(JSON.stringify(this.requestlist) != "{}"){
					this.requestflag =true; 
				}else{
					this.requestflag =false; 
				}
				// console.log(this.indexlist)
			},
			showuserlist(state){//获取好友列表
				return new Promise((resolve,reject)=>{
					uni.request({
						url:this.serverurl+"index/getusers",
						data:{
							uid:this.userinfo.id,
							state,
							token:this.userinfo.token
						},
						method:'POST',
						success:(res)=>{
							let info = res.data
							if(info.status == 200){
								this.netflag = false					
								resolve(info.data)
							}else if(info.status == 300){
								uni.navigateTo({//token过期
									url:"../llogin/llogin?name="+this.user.name
								})
							}					
						},
						fail: () => {
							this.netflag = true;
						}
					})
				})	
			},
			showgrouplist(){//获取群
				return new Promise((resolve,reject)=>{
					uni.request({
						url:this.serverurl+"index/getgroups",
						data:{
							uid:this.userinfo.id,
							token:this.userinfo.token
						},
						method:'POST',
						success:(res)=>{	
							let info = res.data
							if(info.status == 200){
								this.netflag = false;
								resolve(info.data)
							}else if(info.status == 300){
								uni.navigateTo({//token过期
									url:"../llogin/llogin?name="+this.user.name
								})
							}
						},
						fail: () => {
							this.netflag = true;
						}
					})
				})
			},
			touserinfo(item){
				if(item.tap == 0){
					uni.navigateTo({
						url:`../friendinfo/friendinfo?id=${item.id}`
					})
				}else if(item.tap == 1){
					uni.navigateTo({
						url:`../groupinfo/groupinfo?id=${item.id}`
					})
				}
				
			},
			// ...mapMutations({
			// 	'setfriend':'SET_FRIEND'
			// })
		},
		components:{
			mheader
		}
	}
</script>

<style lang="scss">
.friendslist{
	position: fixed;
	bottom: 0;
	top: 0;
	width: 100%;
	.nonet{
		position: absolute;
		bottom: 50%;
		transform: translateY(50%);
		width: 100%;
		.netimage{
			display: block;
			width: 40rpx;
			height: 40rpx;
			margin: 0 auto;
		}
		.tip{
			margin-top: 30rpx;
			text-align: center;
			color: rgba(158, 158, 158, 100);
			font-size: 28rpx;
		}
	}
	.nonoe{
		position: absolute;
		bottom: 50%;
		transform: translateY(50%);
		width: 100%;
		.imgalone{
			display: block;
			width: 400rpx;
			height: 400rpx;
			margin: 0 auto;
		}
		.tip{
			text-align: center;
			color: rgba(158, 158, 158, 100);
			font-size: 28rpx;
		}
		.searchfriend{
			display: block;
			margin: 40rpx auto;
			width: 360rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 16px;
			text-align: center;
			background-color: rgba(52, 199, 88, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 36rpx;
			font-weight: bold;
			opacity: 0.78;
		}
	}
	.list{
		position: fixed;
		bottom: 0;
		width: 100%;
		top: 120rpx;
		background-color: rgba(242, 242, 247, 100);
		overflow: hidden;
		.container{
			width: 100%;
			.item{
				height: 160rpx;
				// opacity: 0.58;
				background-color: rgba(255, 255, 255, 100);
				display:flex;
				&:active{
					background-color: rgba(178, 239, 155, 100);
				}
				.left{
					position: relative;
					box-sizing: border-box;
					flex: 0 0 162rpx;
					width: 162rpx;
					height: 100%;
					padding: 30rpx 26rpx;
					.groupicon{
						position: absolute;
						display: block;
						bottom: 15rpx;
						right: 15rpx;
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						overflow: hidden;
					}
					.tips{
						position: absolute;
						top: 13rpx;
						right: 16rpx;
						min-width: 40rpx;
						padding: 0 10rpx;
						height: 40rpx;
						box-sizing: border-box;
						border-radius: 20rpx;
						background-color: #FF2D55;
						font-size: 24rpx;
						line-height: 40rpx;
						text-align: center;
						
					}
					.userimg{
						width: 100rpx;
						height: 100rpx;
						border: 4rpx solid $uni-imgborder-color;
						border-radius: 24rpx;
						background-color:#9CFF2D55 ;
					}
				}
				.right{
					flex: 1;
					box-sizing: border-box;
					height: 100%;
					border-bottom: 1rpx solid $uni-border-color;
					>view{
						height: 50%;
					}
					.top{	
						box-sizing: border-box;
						padding-top: 40rpx;
						>view{
							display:inline-block; 
							line-height: 30rpx;
						}
						.username{						
							width: 70%;
							color: rgba(16, 16, 16, 100);
							font-size: 36rpx;						
							text-align: left;
							font-family: PingFangSC-regular;
						}
						.time{
							width: 30%;
							box-sizing: border-box;
							// padding-right:24rpx ;
							text-align: center !important;
							color: rgba(158, 158, 158, 100);
							font-size: 24rpx;
							text-align: left;
							font-family: PingFangSC-regular;
						}
						
					}
					.bottom{
						padding-top: 20rpx;
						width: 400rpx;					
						.msg{
							line-height: 30rpx;
							color: rgba(117, 117, 117, 100);
							font-size: 26rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
	
}
</style>
